.field {
    margin-bottom: $fieldMargin;
}

.field > label {
    display: inline-block;
    margin-bottom: $fieldLabelMargin;
}

.field.grid > label {
    display: flex;
    align-items: center;
}

.field > small {
    margin-top: $helperTextMargin;
}

.field.grid,
.formgrid.grid {
    margin-top: 0;
}

.field.grid .col-fixed,
.formgrid.grid .col-fixed,
.field.grid .col,
.formgrid.grid .col,
.field.grid .col-1, 
.formgrid.grid .col-1, 
.field.grid .col-2,
.formgrid.grid .col-2, 
.field.grid .col-3, 
.formgrid.grid .col-3, 
.field.grid .col-4, 
.formgrid.grid .col-4, 
.field.grid .col-5, 
.formgrid.grid .col-5, 
.field.grid .col-6, 
.formgrid.grid .col-6,
.field.grid .col-7, 
.formgrid.grid .col-7, 
.field.grid .col-8, 
.formgrid.grid .col-8, 
.field.grid .col-9, 
.formgrid.grid .col-9, 
.field.grid .col-10, 
.formgrid.grid .col-10, 
.field.grid .col-11, 
.formgrid.grid .col-11, 
.field.grid .col-12,
.formgrid.grid .col-12 {
    padding-top: 0;
    padding-bottom: 0;
}

.formgroup-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.formgroup-inline .field,
.formgroup-inline .field-checkbox,
.formgroup-inline .field-radiobutton {
    margin-right: $fieldMargin;
}

.formgroup-inline .field > label,
.formgroup-inline .field-checkbox > label,
.formgroup-inline .field-radiobutton > label {
    margin-right: $fieldLabelMargin;
    margin-bottom: 0;
}

.field-checkbox,
.field-radiobutton {
    margin-bottom: $fieldMargin;
    display: flex;
    align-items: center;
}

.field-checkbox > label,
.field-radiobutton > label {
    margin-left: $fieldLabelMargin;
    line-height: 1;
}
